<template>
	<!-- 写了一个 xx.vue文件记得要在 pages.json中注册 -->
	<view class="pass" @click="add">
		<!-- 1.申请通行证部分 -->
		<view class="add">
			<image src="/static/add.png"></image>
		</view>
		<!-- 2.通行证列表部分 -->
		<!-- 一个标签可以定义多个类名 方便写样式 -->
		<view :class="statusClassMapping[item.status]" v-for="(item,index) in passList" :key="index">
			<!-- 1.允许通行的位置 -->
			<view class="address">
				{{item.address}}
			</view>
			<!-- 2.状态 ：0待审核 1通行、2禁止通行、 -->
			<view class="status">
				{{statusMapping[item.status]}}
			</view>
			<!-- 3.信息 -->
			<view class="info">
				<!-- 左边 -->
				<view class="left">
					<view>{{user.username}}</view>
					<view>{{user.idNumber}}</view>
				</view>
				<!-- 右边 -->
				<view class="right">
					<view>{{item.startTime}}</view>
					<view>至</view>
					<view>{{item.endTime}}</view>
				</view>
			</view>
		</view>
		<!-- 3.禁止通行部分 -->
		<!-- http://blog.coldworld.top:8081/pass/getUserPass/132 -->
		<!-- 4.待审核部分 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					// 通行地址
					address: "",
					// 通行截止时间
					endTime: "",
					// 申请原因
					reason: "",
					// 通行开始时间
					startTime: "",
					// 通行状态
					status: 0,
					// 用户id
					userId: 0
				},
				passList: [],
				user: {},
				userId: '',
				statusMapping: ['审核中', '通行证', '禁止通行'],
				statusClassMapping: ['card yellow', 'card green', 'card red'],
			}
		},
		methods: {
			// 1.跳转到申请页面方法
			add() {
				uni.navigateTo({
					url: "./add"
				})
			},
			// 2.获取通行证列表的方法
			getPassList() {
				uni.request({
					url: `http://blog.coldworld.top:8081/pass/getUserPass/${this.userId}`,
					method: "GET",
					// data: 不用传参了，参数已经拼接在url上了
					success: (res) => {
						// console.log(res)
						// if() todo 20000
						if (res.data.code == 20000) {
							this.passList = res.data.data.pass
							// 新数据在前面展示 反转
							this.passList.reverse()
							this.user = res.data.data.user
						} else {
							// 错误提示
							return uni.showToast({
								title: res.data.message,
								icon: "error",
							})
						}
					}
				})
			},



		},
		onLoad() {
			// todo 页面加载获取 passList
			let id = uni.getStorageSync('id')
			// console.log(id)
			if (id) {
				this.userId = id
				this.getPassList()
			} else {
				uni.redirectTo({
					url: "../login/login"
				})
			}

		},
		// 页面显示时，获取passlist 自动更新页面
		onShow() {
			this.getPassList()
		}

	}
</script>

<style lang="scss">
	// 类选择器 用点（.） 标签选择器 直接写标签名（没有点！！）
	.pass {
		padding: 30rpx;

		.add {
			display: flex;
			border: 6rpx dashed #515151;
			height: 300rpx;
			border-radius: 14rpx;
			align-items: center;
			justify-content: center;

			image {
				width: 120rpx;
				height: 130rpx;
			}
		}

		// 通行证
		.card {
			height: 400rpx;
			border-radius: 14rpx;
			background-color: #515151;
			color: #fff;
			margin-top: 30rpx;
			padding: 20rpx;

			.status {
				font-size: 100rpx;
				line-height: 200rpx;
				text-align: center;
			}

			.info {
				display: flex;
				justify-content: space-between;

				.left {

					//  &代表left >代表子类选择器 view:nth-child(1) 选择第一个孩子view
					&>view:nth-child(1) {
						margin-bottom: 20rpx;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
				}
			}
		}

		.red {
			background-color: #c3272b;
		}

		.green {
			background-color: #01753a;
		}

		.yellow {
			background-color: #f7ce46;
		}

	}
</style>
